<link href="__PUBLIC__/css/style.default.css" rel="stylesheet">

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="__PUBLIC__/js/html5shiv.js"></script>
<script src="__PUBLIC__/js/respond.min.js"></script>
<![endif]-->

<style>
    .colorpicker{
        z-index: 1050;
    }
</style>
<div class="mainpanel">
    <div class="pageheader">
        <div class="media">
            <div class="pageicon pull-left">
                <i class="fa fa-th-list"></i>
            </div>
            <div class="media-body">
                <ul class="breadcrumb">
                    <li><a href=""><i class="glyphicon glyphicon-home"></i></a></li>
                    <li><a href="">首页</a></li>
                    <li>设备管理</li>
                </ul>
                <h4>设备管理</h4>
            </div>
        </div><!-- media -->
    </div>

    <div class="contentpanel">

        <div class="panel panel-primary-head">
            <div id="succ_file_s" class="alert alert-success hides">
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                <strong>用户添加成功</strong>
            </div>

            <div id="faild_file_s" class="alert alert-danger hides">
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                <strong>用户添加失败,请检查！</strong>
            </div>

            <div class="row" style="padding: 0 15px">
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <div class="panel-btns" style="display: none;">
                                <a href="" class="panel-minimize tooltips maximize" data-toggle="tooltip" title="" data-original-title="Minimize Panel">
                                    <i class="fa fa-plus"></i>
                                </a>
                            </div><!-- panel-btns -->
                            <h4 class="panel-title">添加设备</h4>
                            <p style="    color: #fff;">点击右上角显示更多</p>
                        </div><!-- panel-heading -->

                        <div class="panel-body" style="display: none;">
                            <form id="dev_add_ajaxForm" method="post" action="{:url('admin/device/deviceadd')}" enctype="multipart/form-data">

                                <div class="row">
                                    <div class="form-group col-md-4">
                                        <label>选择机构</label>
                                        <select id="select-search-hide" name="org_code" data-placeholder="Choose One" class="width300">
                                            {volist name="org_list" id="vo"}
                                            <option value="{$vo.org_code}">{$vo.org_name}</option>
                                            {/volist}

                                        </select>
                                    </div>

                                    <div class="form-group col-md-4" style="float: right">
                                        <label>设备名称</label>
                                        <input type="text" name="dev_name" placeholder="设备名称" class="form-control">
                                    </div>


                                </div>
                                <div class="row">
                                    <div class="form-group col-md-4">
                                        <label>设备编码</label>
                                        <input type="text" name="dev_code" placeholder="设备编码" class="form-control">
                                    </div>

                                    <div class="form-group col-md-4">
                                        <label>MAC</label>
                                        <input type="text" name="dev_mac" placeholder="MAC" class="form-control">
                                    </div>
                                    <div class="form-group col-md-4">
                                        <div>
                                            <label>设备颜色</label>
                                        </div>

                                        <!--<input type="text" name="dev_color" placeholder="设备颜色" class="form-control">-->
                                        <input type="text" name="dev_color" class="form-control colorpicker-input" placeholder="#000000" id="colorpicker" value="#000000" />
                                        <span id="colorSelector" class="colorselector">
                                            <span></span>
                                        </span>

                                    </div>
                                </div>

                                <div class="row">
                                    <div class="form-group col-md-4">
                                        <label>设备类型</label>
                                        <input type="text" name="dev_type" placeholder="设备类型" class="form-control">
                                    </div>
                                    <div class="form-group col-md-4">
                                        <label>硬件版本</label>
                                        <input type="text" name="dev_edition" placeholder="硬件版本" class="form-control">
                                    </div>
                                    <div class="form-group col-md-4">
                                        <label>软件版本</label>
                                        <input type="text" name="dev_soft_edition" placeholder="软件版本" class="form-control">
                                    </div>

                                </div>
                            </form>

                        </div><!-- panel-body -->

                        <div class="panel-footer" style="display: none;">
                            <button id="dev_ADD_FROM_BTN" class="btn btn-primary">添加</button>
                        </div><!-- panel-footer -->
                    </div><!-- panel -->

                </div>
            </div>

            <table id="exRowTable" class="table table-striped table-bordered">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>设备名称</th>
                    <th>创建时间</th>
                    <th>机构编码</th>
                    <th>设备编码</th>
                    <th>设备MAC</th>

                    <th>产品型号</th>
                    <th>硬件版本号</th>
                    <th>软件版本号</th>

                    <th>设备颜色</th>
                    <th>设备状态</th>
                    <th>操作</th>
                </tr>
                </thead>
            </table>
        </div><!-- panel -->

    </div>

</div>
<!--madol 修改 hide-->
<div id="dev_paw_save_madol" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-hidden="true" data-dismiss="modal" class="close" type="button">&times;</button>
                <h4 class="modal-title">修改设备</h4>
            </div>
            <div class="modal-body">
                <div id="dev_paw_save_param" class="row" style="padding-right: 2rem;padding-left: 2rem">
                    <div class="panel-body" >
                        <form id="dev_save_ajaxForm" method="post" action="{:url('admin/device/deviceupd')}" enctype="multipart/form-data">
                            <input name="dev_sn" type="hidden">
                            <div class="row">

                                <div class="form-group col-md-4" >
                                    <label>机构名称</label>
                                    <select name="org_code" class="form-control">
                                        {volist name="org_list" id="vo"}
                                        <option value="{$vo.org_code}">{$vo.org_name}</option>
                                        {/volist}
                                    </select>

                                </div>

                                <div class="form-group col-md-4" >
                                    <label>设备名称</label>
                                    <input type="text" name="dev_name" placeholder="设备名称" class="form-control">
                                </div>

                                <div class="form-group col-md-4">
                                    <label>状态</label>
                                    <select name="dev_status" class="form-control">
                                        <option value="1">正常</option>
                                        <option value="0">禁用</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group col-md-4">
                                    <label>设备编码</label>
                                    <input type="text" name="dev_code" placeholder="设备编码" class="form-control">
                                </div>

                                <div class="form-group col-md-4">
                                    <label>MAC</label>
                                    <input type="text" name="dev_mac" placeholder="MAC" class="form-control">
                                </div>
                                <div class="form-group col-md-4">
                                    <div>
                                        <label>设备颜色</label>
                                    </div>
                                    <input id="colorpicker1" type="text" name="dev_color" class="form-control colorpicker-input" placeholder="#000000"  value="#000000" />
                                    <span id="colorSelector1" class="colorselector">
                                            <span></span>
                                        </span>

                                </div>
                            </div>

                        </form>

                    </div><!-- panel-body -->

                    <div style="padding-left: 20px">
                        <button id="dev_save_FROM_BTN" class="btn btn-primary">提交</button>
                    </div><!-- panel-footer -->
                </div>
            </div>
        </div>
    </div>
</div>

<!--madol 修改密码 hide-->
<div id="fp_dev_org_madol" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-hidden="true" data-dismiss="modal" class="close" type="button">&times;</button>
                <h4 class="modal-title">分配设备</h4>
            </div>
            <div class="modal-body">
                <div  class="row" style="padding-right: 2rem;padding-left: 2rem">
                    <div class="panel-body" >
                        <input type="hidden" id="dev_id_fp" name="dev_id">
                        <table id="orgRowTable" class="table table-striped table-bordered">
                            <thead>
                                <tr>
                                    <th>机构名称</th>
                                    <th>所在区域</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                        </table>
                    </div><!-- panel-body -->

                    <div style="padding-left: 20px">
                       <!-- <button id="dev_save_FROM_BTN" class="btn btn-primary">提交</button>-->
                    </div><!-- panel-footer -->
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .hides{
        display: none;
    }

</style>
<script>
    jQuery('#select-search-hide').select2({
        minimumResultsForSearch: -1
    });
    var exRowTable;
    $(function(){

        // Color Picker添加
        if(jQuery('#colorpicker').length > 0) {
            jQuery('#colorSelector').ColorPicker({
                onShow: function (colpkr) {
                    jQuery(colpkr).fadeIn(500);
                    return false;
                },
                onHide: function (colpkr) {
                    jQuery(colpkr).fadeOut(500);
                    return false;
                },
                onChange: function (hsb, hex, rgb) {
                    jQuery('#colorSelector span').css('backgroundColor', '#' + hex);
                    jQuery('#colorpicker').val('#'+hex);
                }
            });
        }
        // Color Picker 修改
        if(jQuery('#colorpicker1').length > 0) {
            jQuery('#colorSelector1').ColorPicker({
                onShow: function (colpkr) {
                    jQuery(colpkr).fadeIn(500);
                    return false;
                },
                onHide: function (colpkr) {
                    jQuery(colpkr).fadeOut(500);
                    return false;
                },
                onChange: function (hsb, hex, rgb) {
                    jQuery('#colorSelector1 span').css('backgroundColor', '#' + hex);
                    jQuery('#colorpicker1').val('#'+hex);
                }
            });
        }

        $("#dev_MADOL_ADD_BTN").click(function () {
            $("#dev_add_madol").modal("show")
        })
        // 添加
        $("#dev_ADD_FROM_BTN").click(function () {

            var dev_code = $("#dev_add_ajaxForm").find('[name = "dev_code"]').val()
            var dev_name = $("#dev_add_ajaxForm").find('[name = "dev_name"]').val()
            var dev_mac = $("#dev_add_ajaxForm").find('[name = "dev_mac"]').val()

            if(dev_name == null || dev_name == undefined || dev_name == ''){
                $("#dev_add_ajaxForm").find('[name = "acc_name"]').focus()
                alert("设备名不能为空")
                return;
            }

            if(dev_code == null || dev_code == undefined || dev_code == ''){
                $("#dev_add_ajaxForm").find('[name = "acc_pwd"]').focus()
                alert("设备编码不能为空")
                return;
            }

            if(dev_mac == null || dev_mac == undefined || dev_mac == ''){
                $("#dev_add_ajaxForm").find('[name = "acc_pwd"]').focus()
                alert("设备MAC不能为空")
                return;
            }

            // return;
            $("#dev_add_ajaxForm").ajaxSubmit(function (data) {
                // console.log(data)
                if(data == 1){
                    $(".hides").hide()
                    $("#succ_file_s").html('设备添加成功')
                    $("#succ_file_s").show()
                }else{
                    $(".hides").hide()
                    $("#faild_file_s").html('设备添加失败')
                    $("#faild_file_s").show()
                }
                exRowTable.ajax.reload();
            });


        })
        // 修改
        $("#dev_save_FROM_BTN").click(function () {

            var dev_code = $("#dev_save_ajaxForm").find('[name = "dev_code"]').val()
            var dev_name = $("#dev_save_ajaxForm").find('[name = "dev_name"]').val()
            var dev_mac = $("#dev_save_ajaxForm").find('[name = "dev_mac"]').val()

            if(dev_name == null || dev_name == undefined || dev_name == ''){
                $("#dev_save_ajaxForm").find('[name = "acc_name"]').focus()
                alert("设备名不能为空")
                return;
            }

            if(dev_code == null || dev_code == undefined || dev_code == ''){
                $("#dev_save_ajaxForm").find('[name = "acc_pwd"]').focus()
                alert("设备编码不能为空")
                return;
            }

            if(dev_mac == null || dev_mac == undefined || dev_mac == ''){
                $("#dev_save_ajaxForm").find('[name = "acc_pwd"]').focus()
                alert("设备MAC不能为空")
                return;
            }

            // return;
            $("#dev_save_ajaxForm").ajaxSubmit(function (data) {
                // console.log(data)
                if(data == 1){
                    $(".hides").hide()
                    $("#succ_file_s").html('设备修改成功')
                    $("#succ_file_s").show()
                }else{
                    $(".hides").hide()
                    $("#faild_file_s").html('设备修改失败')
                    $("#faild_file_s").show()
                }
                exRowTable.ajax.reload();
            });

        })

        $("[data-toggle='tooltip']").tooltip();




        exRowTable = $('#exRowTable').DataTable({
            responsive: true,
            "fnDrawCallback": function(oSettings) {
                jQuery('#exRowTable_paginate ul').addClass('pagination-active-success');
            },
            "ajax": "{:url('admin/device/devicequery')}",
            "columns": [
                { "data": "dev_sn" },
                { "data": "dev_name" },
                { "data": "create_date" },
                { "data": "org_code" },
                { "data": "dev_code" },
                { "data": "dev_mac" },

                { "data": "dev_type" },
                { "data": "dev_edition" },
                { "data": "dev_soft_edition" },

                { "data": "dev_color","render": function ( data, type, full, meta ) {
                        return '<button class="btn btn-primary btn-xs" style="background-color: '+data+';color: '+data+'">修改</button>';
                    } },
                { "data": "dev_status","render": function ( data, type, full, meta ) {

                    switch (data){
                        case '1':
                            return '正常';
                            break;
                        case '0':
                            return '禁用';
                            break;
                        default:
                            return '未知';
                            break;
                        }

                    }  },
                { "data": "dev_sn","render": function ( data, type, full, meta ) {
                        return '<button onclick="fp_view('+data+',\''+full.dev_sn+'\')" class="btn btn-primary btn-xs">分配</button> <span>  </span>'+ '<button onclick="dev_paw_save_view('+data+',\''+full.dev_sn+'\')" class="btn btn-primary btn-xs">修改</button> <span>  </span><button onclick="dev_del('+data+')" class="btn btn-danger btn-xs">删除</button>';
                    }},
            ],
            "order": [[0, 'desc']]
        });

        orgRowTable = $('#orgRowTable').DataTable({
            responsive: true,
            "fnDrawCallback": function(oSettings) {
                jQuery('#exRowTable_paginate ul').addClass('pagination-active-success');
            },
            "ajax": "{:url('admin/org/orgquery')}",
            "columns": [
                { "data": "org_name" },


                { "data": "org_address" },

                { "data": "org_code","render": function ( data, type, full, meta ) {
                        return '<button onclick=fpdevtoorg("'+data+'") class="btn btn-primary btn-xs" >分配</button> ';
                    }},
            ],
            "order": [[0, 'desc']]
        });




    })
    // 删除用户
    function dev_del(id) {
        if(confirm('确认删除！')){
            $.post("{:url('admin/device/devicedel')}",{ID:id},function (data) {
                if(data == 1){
                    exRowTable.ajax.reload();
                    alert('删除成功')
                    // console.log('删除成功')
                }else{
                    alert("该用户不能删除")
                }
                exRowTable.ajax.reload();
            })
        }
    }

    function dev_paw_save_view(id) {

        $.post("{:url('admin/device/devicesel')}",{ID:id},function (data) {
            var data = eval("("+data+")")
            $("#dev_save_ajaxForm").find('[name="org_code"]').val(data['org_code'])
            $("#dev_save_ajaxForm").find('[name="dev_color"]').val(data['dev_color'])
            $("#dev_save_ajaxForm").find('[name="dev_mac"]').val(data['dev_mac'])
            $("#dev_save_ajaxForm").find('[name="dev_name"]').val(data['dev_name'])
            $("#dev_save_ajaxForm").find('[name="dev_code"]').val(data['dev_code'])
            $("#dev_save_ajaxForm").find('[name="dev_sn"]').val(data['dev_sn'])
            var colorSelector1c = $("#colorSelector1 span").css('background',data['dev_color'])
            // console.log(colorSelector1c)
        })
        $("#dev_paw_save_madol").modal('show')
    }

    function fp_view(dev_id) {
        $("#dev_id_fp").val(dev_id)
        $("#fp_dev_org_madol").modal('show')
    }
    
    function fpdevtoorg(org_code) {
        var dev_sn =$("#dev_id_fp").val()
        console.log(dev_sn)
        console.log(org_code)
        $.post("{:url('admin/device/devdistributionbyorg')}",{dev_sn:dev_sn,org_code:org_code},function (data) {
            if(data == 1){
                alert('操作成功')
                // console.log('删除成功')
            }else{
                alert("操作失败")
            }
            exRowTable.ajax.reload();
        })
    }


</script>



